<template>
  <a-card :bordered="false">
    <super-query
      :fieldList="queryObj"
      @ok="handleSuperQuery"
    />
    <div class="table-operator">
      <a-button @click="$refs.userAddOrUpdate.init('','add')" icon="plus" type="primary" >新建</a-button>
    </div>
    <s-table
      ref="table"
      :alert="alert"
      :data="loadData"
      :columns="columns"
      :rowKey="record => record.userId"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <span slot="avatar" slot-scope="text,record">
        <a-avatar size="large" :src="text" v-if="text"/>
        <a-avatar size="large" icon="user" v-else/>
      </span>
      <span slot="status" slot-scope="text, record">
        <a-tag color="#108ee9">{{ text | dictFilter(statusTypeList) }}</a-tag>
      </span>
      <span slot="action" slot-scope="text,record">
        <span v-action="'sys:user:update'">
          <a href="javascript:;" @click="edit(record)">编辑</a>
          <a-divider type="vertical" />
        </span>
        <span v-action="'sys:user:del'">
          <a-popconfirm title="是否删除用户" @confirm="deleteItem(record)" okText="是" cancelText="否">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a href="javascript:;" style="color: red">删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
        </span>
        <span v-action="'sys:user:info'">
          <a href="javascript:;"@click="show(record)">查看</a>
        </span>
      </span>
    </s-table>
    <user-add-or-update
      @ok="queryPage"
      ref="userAddOrUpdate"
    />
  </a-card>
</template>

<script>
import SuperQuery from '@/components/SuperQuery/SuperQuery'
import { queryObj } from './tableTemplate'
import { statusTypeList } from '@/dict'
import { delObj, PageList } from '@api/sys/user'
import UserAddOrUpdate from './userAddOrUpdate'
import { TableMixin } from '@/mixins/TableMixin'
export default {
  name: 'Index',
  mixins: [TableMixin],
  components: {
    SuperQuery,
    UserAddOrUpdate
  },
  data () {
    return {
      queryParam: {},
      queryObj,
      statusTypeList,
      columns: [
        {
          title: '序号',
          width: '10%',
          customRender: (text, record, index) => {
            return (
              <div>
                {index + 1}
              </div>
            )
          }
        }, {
          title: '用户名',
          sorter: true,
          dataIndex: 'username'
        },
        {
          title: '头像',
          dataIndex: 'avatar',
          scopedSlots: { customRender: 'avatar' }
        }, {
          title: '所在部门',
          dataIndex: 'deptName'
        }, {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        }, {
          title: '手机号',
          width: '10%',
          sorter: true,
          dataIndex: 'phone'
        }, {
          title: '角色',
          width: '15%',
          dataIndex: 'roleList',
          customRender: (record) => {
            return (
              <div>
                {
                  record.map(item => {
                    return <a-tag color="#108ee9">{item.roleName} </a-tag>
                  })
                }
              </div>
            )
          }
        },
        {
          title: '操作',
          width: '200px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        return PageList(
          Object.assign(parameter, this.queryParam)
        ).then(res => {
          return res.data
        })
      }
    }
  },
  methods: {
    handleSuperQuery (params) {
      this.queryParam.queryType = params.queryType
      this.queryParam.queryItems = encodeURI(JSON.stringify(params.queryItems))
      this.queryPage()
    },
    edit (record) {
      this.$refs.userAddOrUpdate.init(record.userId, 'edit')
    },
    deleteItem (record) {
      delObj(record.userId).then(res => {
        this.$message.info('删除成功')
        this.queryPage()
      })
    },
    show (record) {
      this.$refs.userAddOrUpdate.init(record.userId, 'show')
    }
  }
}
</script>

<style scoped>

</style>
